<template>
	<div id="cart">
		<nav-bar class="nav"><div slot="center">购物车({{length}})</div></nav-bar>
		<scroll class="scroll">
			<cart-list />
		</scroll>
		<cart-bottom-bar/>
	</div>
</template>

<script>
	import CartList from './childComponents/CartList'
	import CartBottomBar from './childComponents/CartBottomBar'
	
	import NavBar from 'components/common/navbar/NavBar'
	import Scroll from 'components/common/scroll/Scroll'
	
	import {mapGetters} from 'vuex'
	export default{
		name: 'Shopcart',
		components: {
			NavBar,
			Scroll,
			CartList,
			CartBottomBar,
		},
		data(){
			return {
				
			}
		},
		computed: {
			 ...mapGetters(['length', 'cartList'])
		},
	}
</script>

<style scoped>
	#cart{
		height: 100vh;
	}
	
	.scroll{
		position: absolute;
		top: 44px;
		bottom: 49px;
		left: 0;
		right: 0;
		
		overflow: hidden;
	}
	
	.nav{
		background: var(--color-tint);
	}
</style>
